<template>
    <div class="shop" ref="shopTarget">
        <div class="title">
            <h2>猜你喜欢</h2>
        </div>
        <div
            class="demo"
            style="margin: 0 auto"
            v-masonry
            gutter="15"
            percent-position="true"
            fit-width="true"
            ref="waterfallTarget"
        >
            <div v-masonry-tile class="card" v-for="item in goodsData" :key="item.id">
                <router-link :to="{ name: 'goods', query: { id: item.id } }">
                    <div>
                        <img :src="item.s_goods_photos[0].path" alt="" />
                        <div class="goodsMsg">
                            <div class="goodsName">
                                <p>{{ item.name }}</p>
                            </div>
                            <div class="goodsDesc">{{ item.desc }}</div>
                            <div class="price">
                                <p>
                                    <strong>￥</strong>
                                    {{ item.price }}
                                    <span>库存:{{ item.stock_num }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onUpdated, nextTick } from 'vue';
import { throttle } from '@/utils';
let waterfallTarget = ref(null);
let shopTarget = ref(null);
const emits = defineEmits(['go']);
defineProps({
    goodsData: Array,
});

onUpdated(() => {
    setTimeout(() => {
        nextTick(() => {
            let a = waterfallTarget.value.style.height.slice(0, -2);
            shopTarget.value.style.height = Number(a) + 100 + 'px';
        });
    }, 1000);
});

document.addEventListener(
    'scroll',
    throttle(function () {
        const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
        if (scrollHeight - scrollTop - 2 <= clientHeight) {
            emits('go'); //将事件go派发至父组件中更新
        }
    }, 500)
);
</script>

<style lang="scss" scoped>
@import '../../../style/base.scss';
.shop {
    width: 100%;
    height: 2rem;
    background-color: #f1f1f1;
    .title {
        margin-top: 0.16rem;
        display: inline-block;
    }
}

.shop {
    .title {
        margin: 0.24rem 0 0.14rem 0.18rem;
        h2 {
            font-size: 0.18rem;
            color: #333;
        }
    }
    .card {
        width: 43vw;
        background-color: #fff;
        padding: 0.04rem;
        img {
            width: 100%;
            display: block;
            height: auto;
        }
        .goodsMsg {
            .goodsName {
                margin: 0.1rem 0;
                p {
                    font-size: 0.14rem;
                    color: #333;
                    width: 100%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
            .goodsDesc {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 0.04rem;
                color: #666;
            }
            .price {
                p {
                    font-size: 0.2rem;
                    color: #ff4142;
                    margin: 0.03rem 0;
                    span {
                        font-size: 0.06rem;
                        color: #999;
                        margin-left: 0.3rem;
                        display: inline-block;
                    }
                    strong {
                        font-size: 0.14rem;
                        margin-left: 0.04rem;
                    }
                }
            }
        }
    }
}
</style>
